<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="./cookie2.html">跳转到cookie2页面</a>
    <!-- 
        cookie 用于存储web页面的用户信息

        比如登录、订单、浏览记录, 每当浏览器向服务端发送请求的时候, 携带这些cookie字符, 服务端会根据浏览器发送的cookie字符去判断浏览器的信息(状态)

        特点:
            1. 存储大小在 4k 左右, 超出部分会被裁切
            2. 可以设置过期时间
     -->

    <script>
        // 1. 创建cookie
        document.cookie = "id=999";
        document.cookie = "name=Jack";
        document.cookie = "token=123456";

        // 2. 获取cookie
        // console.log(document.cookie); // name=Jack; token=123456

        // 思考: 获取格式如下:
        // {
        //     "name": "Jack",
        //     "token": "123456"
        // }

        // 3. 设置cookie过期时间
        // expires设置过期时间(浏览器默认过期时间是会话时间session, 关闭浏览器cookie就会消失)
        // let t = 当前时间 + 3000; // 3秒之后
        let t = new Date(new Date().getTime() + 3000).toUTCString(); // 转换成世界标准时间
        console.log(t);
        document.cookie = `timeout=3000; expires=${t}`;
        // 模拟4秒后打印设置过期时间的cookie
        setTimeout(() => {
            console.log(fn(document.cookie).timeout); // undefined
        }, 4000);

        // 4. 设置指定路径(页面, 访问权限)获取cookie
        // path 设置页面权限
        document.cookie = "cookie2=cookie2专属页面权限; path=/cookie2.html";

        // 5. 设置访问域名名称(共享域名)
        // domain 设置域名名称
        // 127.0.0.1 与 localhost 为例子
        document.cookie = "money=1个亿; domain=localhost";


        function fn(cookie) {
            console.log(cookie.split("; "));
            let res = cookie.split("; ").reduce((total, item, itemIndex, arr) => {
                // console.log(total); // {} --> {id: 999} ---> {id: 999, name: Jack}
                total[item.split("=")[0]] = item.split("=")[1]; // {id: 999, name: Jack, token: 123456}
                return total; // {id: 999, name: Jack, token: 123456}
            }, {});
            console.log(res);
        };

        fn(document.cookie)
    </script>
</body>

</html>